<template>
  <div>
    <div class="top">
      <van-icon @click="goback" class="zuo" name="arrow-left" />
      登录/注册
    </div>
    <div>
      <van-cell-group>
        <van-field v-model="name" label="账号:" placeholder="手机号/账号" />
      </van-cell-group>
      <van-cell-group>
        <van-field
          :type="type"
          clearable
          v-model="password"
          label="密码:"
          placeholder="密码"
          :right-icon="typeIcon"
          @click-right-icon="changeIocn(typeIcon)"
        />
      </van-cell-group>
    </div>
    <p class="red" @click="Inc">点击注册</p>
    <button class="go" @click="Go">登录</button>
    <!-- <div>{{ msg }}</div> -->
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "RegVue",
  data() {
    return {
      name: "",
      password: "",
      // msg: "",
      typeIcon: "closed-eye",
      type:"password"
    };
  },
  methods: {
    goback() {
      this.$router.back();
    },
    Go() {
      console.log("登录");
      this.$server({
        url: "user/login",
        method: "post",
        data: {
          loginname: this.name,
          password: this.password,
        },
      }).then((res) => {
        let data = res.data;
        console.log(data);
        if (data.code == 200) {
          Toast("登陆成功");
          localStorage.setItem("token", data.data.token);
          localStorage.setItem("userid", data.data.userid);
          // this.msg = "登陆成功";
          setTimeout(() => {
            this.goback();
          }, 1000);
        } else if (data.code == 10010) {
          Toast("登陆失败,用户名或密码错误");
          // this.msg = "用户名或密码错误";
        } else if (data.code == 10011) {
          Toast("登陆失败,用户名或密码错误");
          // this.msg = "用户名或密码错误";
        }
      });
    },
    Inc() {
      this.$router.replace("/Inc");
    },
    changeIocn(val){
       if(val=="closed-eye"){
        console.log("hhhhh");
        this.type="text";
        this.typeIcon="eye-o";
       }else{
        this.type="password";
        this.typeIcon="closed-eye";
       }
    }
  },
};
</script>

<style scoped>
.top {
  width: 100%;
  height: 3.75rem;
  font-size: 1.25rem;
  text-align: center;
  line-height: 3.75rem;
  border-bottom: 0.0625rem solid black;
  position: relative;
}
.zuo {
  position: absolute;
  left: 0.625rem;
  font-size: 1.25rem;
  top: 1.375rem;
}
.go {
  background-color: rgb(255, 166, 2);
  width: 18.75rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  border: none;
  position: absolute;
  left: 2.5rem;
  top: 12.5rem;
}
.red {
  color: red;
  font-size: 0.875rem;
  position: absolute;
  right: 0.3125rem;
}
</style>